<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>天气查询系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

    <style>
        body {
            background: url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1920&q=80') no-repeat center center fixed;
            background-size: cover;
            font-family: "Segoe UI", sans-serif;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            padding: 30px;
            color: #fff;
        }

        .title {
            font-size: 2.5rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px #000;
        }

        .form-control {
            font-size: 1.2rem;
        }

        .btn-primary {
            font-size: 1.2rem;
            padding: 10px 30px;
        }

        .card-weather {
            background: rgba(255, 255, 255, 0.85);
            border-radius: 15px;
            padding: 20px;
            color: #333;
        }
    </style>
</head>
<body>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 glass-card">
            <div class="text-center mb-4">
                <h1 class="title"><i class="fas fa-cloud-sun"></i> 天气查询系统</h1>
                <p class="lead">输入城市名，获取实时天气信息</p>
            </div>

            <div class="mb-3">
                <label for="cityInput" class="form-label">城市名</label>
                <input type="text" class="form-control" id="cityInput" placeholder="例如：北京">
            </div>
            <div class="d-grid">
                <button class="btn btn-primary" onclick="getWeather()"><i class="fas fa-search-location"></i> 查询天气</button>
            </div>

            <div id="result" class="mt-4"></div>
        </div>
    </div>
</div>

<script>
    async function getWeather() {
        const city = document.getElementById('cityInput').value.trim();
        if (!city) {
            alert('请输入城市名');
            return;
        }

        const response = await fetch(`/api/v1/weather?city=${encodeURIComponent(city)}`);
        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '';

        if (response.ok) {
            const data = await response.json();
            resultDiv.innerHTML = `
                <div class="card-weather mt-3">
                    <h4><i class="fas fa-city"></i> ${data.city}，${data.country}</h4>
                    <p><i class="fas fa-thermometer-half"></i> 温度：${data.temperature}°C</p>
                    <p><i class="fas fa-tint"></i> 湿度：${data.humidity}%</p>
                    <p><i class="fas fa-wind"></i> 风速：${data.wind_speed} m/s</p>
                    <p><i class="fas fa-cloud"></i> 天气状况：${data.condition}</p>
                    <p><small><i class="far fa-clock"></i> 数据时间：${data.timestamp}</small></p>
                </div>
            `;
        } else {
            const err = await response.json();
            resultDiv.innerHTML = `<div class="alert alert-danger mt-3">❌ 错误：${err.error}</div>`;
        }
    }
</script>

</body>
</html>
